/* =========================================
   ESTILOS BASE DEL MODAL (CRITERIO NOHUS)
   ========================================= */

/* Contenedor principal del modal */
/* Ajuste específico para el contenedor del contenido */
.nohus-modal-content {
    min-height: 80vh; /* Asegura que el modal sea alto */
    display: flex;
    flex-direction: column;
}

/* Columna de la imagen */
.bg-light-nohus {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
   /* min-height: 500px; /* Altura generosa en desktop */
    border-right: 1px solid #f0f0f0;
}

#modal-img {
    max-height: 80vh; 
    width: auto;
    max-width: 90%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Botón de cerrar personalizado */
.nohus-close {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 100;
    font-size: 1.8rem;
    font-weight: 200;
    color: #000;
    opacity: 0.8;
    text-shadow: none;
    border: none;
    background: none;
}

.nohus-close:hover {
    opacity: 1;
}

/* =========================================
   DETALLES Y TIPOGRAFÍA
   ========================================= */

.nohus-modal-title {
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
}

.nohus-modal-price {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 25px;
    display: block;
}

.nohus-option-group {
    margin-bottom: 25px;
}

.nohus-option-group label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: #000;
}

/* =========================================
   GRILLAS DE SELECCIÓN (Talla y Color)
   ========================================= */

.nohus-color-grid, 
.nohus-size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.size-item, 
.color-item {
    border: 1px solid #e0e0e0;
    padding: 10px 18px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
    background: #fff;
    text-transform: uppercase;
}

.size-item:hover, 
.color-item:hover {
    border-color: #000;
}

.size-item.active, 
.color-item.active {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Input de cantidad */
.nohus-input {
    width: 80px;
    border: 1px solid #e0e0e0;
    padding: 10px;
    text-align: center;
    font-weight: 700;
    outline: none;
}

.nohus-input:focus {
    border-color: #000;
}

/* Botón Add to Cart */
.btn-nohus-dark {
    background: #000;
    color: #fff;
    border: none;
    padding: 18px;
    width: 100%;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
    margin-top: 10px;
    transition: background 0.3s;
}

.btn-nohus-dark:hover {
    background: #333;
}

/* --- ICONOS DE NAVEGACIÓN (FLECHAS NEGRAS) --- */
.carousel-control-prev-icon-small,
.carousel-control-next-icon-small {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Flecha Izquierda */
.carousel-control-prev-icon-small {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

/* Flecha Derecha */
.carousel-control-next-icon-small {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/* Posicionamiento de las flechas para que no se pierdan */
.carousel-control-prev, .carousel-control-next {
    width: 10%;
    opacity: 0.8;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1;
}

/* --- INDICADORES (CIRCULITOS) --- */
.nohus-indicators {
    bottom: -35px !important; /* Los saca de la imagen para que no estorben */
}

.nohus-indicators li {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #ddd !important;
    border: none !important;
    margin: 0 5px !important;
    cursor: pointer;
}

.nohus-indicators li.active {
    background-color: #000 !important;
}

/* Ajuste móvil para que el texto no tape los puntos */
@media (max-width: 767px) {
    .bg-light-nohus {
        margin-bottom: 45px !important;
    }
}

/* =========================================
   ADAPTACIÓN RESPONSIVA (MÓVILES)
   ========================================= */
/* Incrementamos el ancho del modal en pantallas grandes */
@media (min-width: 992px) {
    .modal-xl {
        max-width: 85% !important; /* Ocupa el 85% del ancho de la pantalla */
    }
}